<template>
  <div class="document bg-white pdh-l pdv-xl">
    <div v-if="!isOpen" class="cf" @tap="isOpen = true">
      <div class="fl t-elp" style="width: 90%;">
        {{shortDesc}}
      </div>
      <div class="fl ta-r" style="width: 10%;"><i class="fi icon-xia"></i></div>
    </div>
    <div v-else>
      <div class="pdb-l">
        <blocks :value="blocks"></blocks>
      </div>
      <div class="ta-c bd-t" @tap="isOpen = false" style="border-top: 1px solid #eee;padding-top:16px;">收起 <i class="fi icon-shang"></i></div>
    </div>
  </div>
</template>

<script>
import Blocks from './blocks.vue'

export default {
  props: {
    blocks: {
      type: Array,
      default: []
    },
    open: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Blocks
  },
  data () {
    return {
      isOpen: this.open
    }
  },
  computed: {
    shortDesc () {
      let sd = ''
      let blocks = this.blocks
      if (blocks.length === 0) return '无内容'
      for (let i = 0; i < blocks.length; i++) {
        let n = blocks[i]
        if (n.type === 'text' && n.value) return n.value
      }
      return '音频作业'
    }
  },
  watch: {
    open (nv) {
      this.isOpen = nv
    }
  },
  methods: {
  }
}
</script>

<style scoped lang="less">
@import '../assets/less/var.less';
</style>
